<template>
    <el-dialog v-model="open" width="80%" align="center" style="position: relative;" draggable>
        <div class="pdbo w100p flex">
            <p>Copy to Order</p>
        </div>
        <div class="pdbo w100p bs flex jc-sb">
            <div class="copybox">
                <div class=" flex jc-sb height">
                    <div class=" flex fdc">
                        <el-select v-model="orderID1" @input="search" @blur="resOrderid" @change="getorderDetail"
                            filterable>
                            <el-option v-for="item in orderidList" :key="item.order_id" :label="item.PI_name"
                                :value="item.order_id" />
                        </el-select>
                        <p class="flex">Copy model to order </p>
                    </div>
                    <el-button type="success" @click="copyOrder">Copy</el-button>
                </div>
                <el-table @selection-change="SelectionMethod" :data="leftOrder" height="400" style="width:100%;">
                    <el-table-column type="selection" width="30" />
                    <el-table-column fixed prop="product_name_pi" label="MODEL" width="170" />
                    <el-table-column prop="Brand_name" label="BRAND" width="100" />
                    <el-table-column align="center" prop="quantity" label="QTY" width="100" />
                    <el-table-column prop="price" label="Price" width="80" />
                    <el-table-column prop="leadingtime" label="LEADING" width="100" />
                    <el-table-column prop="product_condition" label="CONDITION" width="120" />
                </el-table>
            </div>
            <div class="copybox">
                <div class="flex jc-sb height">
                    <div>
                        <el-button @click="newOrder" type="primary">New Order</el-button>
                        <el-button @click="save">Save</el-button>
                    </div>
                    <el-select v-model="orderName" @change="take(orderName)" @input="search" @blur="resOrderid"
                        filterable>
                        <el-option v-for="item in orderidList" :key="item.order_id" :label="item.PI_name"
                            :value="item.PI_name" />
                    </el-select>
                </div>
                <el-table :data="rightOrder" height="400" style="width:100%;">
                    <el-table-column fixed prop="product_name_pi" label="MODEL" width="170" />
                    <el-table-column prop="Brand_name" label="BRAND" width="100" />
                    <el-table-column align="center" prop="quantity" label="QTY" width="100" />
                    <el-table-column prop="price" label="Price" width="80" />
                    <el-table-column prop="leadingtime" label="LEADING" width="100" />
                    <el-table-column prop="product_condition" label="CONDITION" width="120" />
                    <el-table-column label="OPERATION" width="120">
                        <template v-slot="operation">
                            <el-button type="danger"
                                style="width: 60%;background-color:#6193D2;color: #fff;border: none;">Remove</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'
const props = defineProps({
    orderidList: Object,
    leftOrder: Object,
    rightOrder: Object,
    orderTitle: String,
    order_id: Number
})
const emits = defineEmits(['getOrderid', 'resetorderid', 'getorderProductList', 'copyOrder', 'SelectionMethod', 'copyOrderSave', 'newOrder'])
const open = ref(false)

const orderID1 = ref('')
const orderID2 = ref('')
const orderName = ref('')
// 开启弹框，赋值默认订单id
const dialogopen = () => {
    open.value = true
    orderName.value = props.orderTitle
    orderID2.value = props.order_id
}
// 右侧值更改后 更改id
const take = (orderName) => {
    orderID2.value = props.orderidList.filter(item => item.PI_name === orderName)[0].order_id
}

// 搜索订单id列表
const search = (id) => {
    emits('getOrderid', id)
}
// 失去焦点
const resOrderid = () => {
    emits('resetorderid')
}
// 获取订单详情
const getorderDetail = () => {
    emits('getorderProductList', orderID1.value)
}

// 多选框
const SelectionMethod = (val) => {
    emits('SelectionMethod', val)
}

// 复制
const copyOrder = () => {
    emits('copyOrder')
}

// 保存
const save = () => {
    emits('copyOrderSave', orderID2.value)
}
// 新建
const newOrder = () => {
    emits('newOrder')
}
defineExpose(
    {
        open,
        orderID1,
        dialogopen
    }
)
</script>
<style lang="less">
.pdbo {
    padding: 10px;
    border: 1px solid #f4f4f4;

    .copybox {
        width: 50%;
        padding: 10px;
        border: 1px solid #f4f4f4;

        .copyleft {
            justify-content: start;
        }

        .height {
            height: 50px;
        }
    }
}
</style>